<template>
  <div>
    <h1>自定义指令 - 自动获取焦点</h1>
    用户名:  <input v-focus id="inp" type="text">
    <h1>自定义指令 - 修改字体颜色</h1>
    <h3 v-color='color'>我是一个可爱的 p</h3>
    <button @click="color = 'red'">点我改色</button>
  </div>
</template>

<script>
// 和 Vue 会显得格格不入
// window.onload = function() {
//   // console.log('我执行了')
//   // 此处获取到焦点
//   const input = document.querySelector('#inp')
//   input.focus()
// }
export default {
  // 局部注册的语法
  // directives: {
  //   指令名: {配置对象}
  // },

  directives: {
    // 指令名: focus
    focus: {
      // inserted 函数, 自动执行
      inserted(el) {
        el.focus()
      }
    },
    color:{
        //inserted 是绑定的dom 插入到页面时执行的函数,只会执行一次,后期如果指令的值发生变化也不会在执行
        //参数1 指令绑定的元素
        //参数2 参数对象 这里用{解构了.下面就能直接使用}
        inserted(el,{value}){
            el.style.color=value
        },
        //这个函数会在指令发生变化时执行
        update(el,bind){
            el.style.color=bind.value
        }

    }

  },

  data() {
    return {
      color: 'yellowgreen'
    }
  }
}
</script>
